<template>
	<view class="body">
		<view>第一步：请点击<text class="innerText">学习平板端</text>的<text class="innerText">[个人中心]</text>并进入<text class="innerText">[个人信息]</text>页面</view>
		<view class="innerImage">
			<image style="height: 480rpx;" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/guide2.png" mode="aspectFill"></image>
		</view>
		
		<view>第二步：请点击<text class="innerText">学习平板端</text>的<text class="innerText">绑定学情中心</text>进入课件学情绑定二维码;</view>
		<view class="innerImage">
			<image style="height: 400rpx;" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/guide3.png" mode="aspectFill"></image>
		</view>
		<view>第三步：点击该页下面<text class="innerText">[扫码绑定学习账号]</text>按钮对准第二步中的二维码进行扫码绑定;</view>
		<view>
			<u-button class="enter" :custom-style="enter" shape="square" @click="goToUrl">扫码绑定学习账号</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enter: {
					color: '#FFFFFF',
					'background-color': '#4880ff',
					'letter-spacing': '2rpx',
					'border-radius': '20rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '500',
					'margin-top': '30rpx',
					'width': '80%',
					'borderRadius': '50rpx'
				},
			}
		},
		methods: {
			goToUrl() {
				uni.navigateTo({
					url: '/pages_subpackage/bindQid/bind'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #fff;
		border-radius: $uni-border-radius-lg;
		padding: 20rpx;
		margin: 20rpx;
	}
	.innerText {
		color: #4880ff;
		padding: 0 5rpx 0 5rpx;
	}
	.innerImage {
		padding: 40rpx 0 40rpx 0;
	}
</style>